import { Component } from '@angular/core';
import {trigger, state, transition, style, animate} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('square', [
      state('green', style({'background-color': 'green', 'height': '100px', 'transform': 'translateX(0)'})),
      // state('red', style({'background-color': 'red', 'height': '100px', 'transform': 'translateX(100%)'})),
      state('red', style({'background-color': 'red', 'height': '100px', 'transform': 'translateX({{transX}})'}),{ params: { transX: "100px" } }),
      transition('green => red', animate('0.2s 0.3s')), // 第一个参数:动画时间, 第二个参数:动画延迟时间
      transition('red => green', animate(1000))
    ])
  ]
})
export class AppComponent {
  title = 'animate01';

  transX:string = '100px';
  squareState: string;
  onClick() {
    this.squareState = this.squareState === 'red' ? 'green' : 'red';
  }

  change(){
    this.transX = '400px';
  }
}
